<template>
  <div class="app-container">
    <el-row style="margin-left: 0">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <!-- <el-form-item label="姓名">
          <el-select v-model="queryParams.id" placeholder="请选择" style="width: 200px">
            <el-option v-for="item in userOptions" :key="item.userId" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="职位" prop="post">
          <el-select v-model="queryParams.post" placeholder="请选择" style="width: 200px">
            <el-option v-for="item in postOptions" :key="item.postId" :label="item.postName" :value="item.postName" :disabled="item.status == 1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="dept">
          <el-tree-select
            v-model="queryParams.dept"
            :data="deptOptions"
            :props="{ value: 'label', label: 'label', children: 'children' }"
            value-key="id"
            placeholder="请选择归属部门"
            check-strictly
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker v-model="queryParams.date" type="date" placeholder="请选择" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getList">查询</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          <el-button icon="Refresh" @click="handleAdd">新增</el-button>
        </el-form-item>
      </el-form>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
    </el-row>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="trainTopic" label="培训主题" align="center">
        <template #default="{ row }">
          <el-button @click="handleDetail(row)">{{ row.trainTopic }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="dateTime" label="培训时间" align="center" />
      <el-table-column prop="trainName" label="培训讲师" align="center" />
      <el-table-column prop="trainPlace" label="地点" align="center" />
      <el-table-column prop="trainCost" label="时长" align="center" />
      <el-table-column prop="trainContent" label="培训内容" align="center" />

      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button type="danger" @click="handleDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-dialog v-model="dialog">
      <el-form :model="submitForm">
        <el-form-item label="日期">
          <el-date-picker v-model="submitForm.dateTime" type="datetime" placeholder="请选择" value-format="YYYY-MM-DD HH:mm:ss" />
        </el-form-item>
        <el-form-item label="讲师">
          <el-input v-model="submitForm.trainName" />
        </el-form-item>
        <el-form-item label="培训主题">
          <el-input v-model="submitForm.trainTopic" />
        </el-form-item>
        <el-form-item label="地点">
          <el-input v-model="submitForm.trainPlace" />
        </el-form-item>
        <el-form-item label="时长">
          <el-input v-model="submitForm.trainCost" />
        </el-form-item>
        <el-form-item label="培训内容">
          <el-input type="textarea" v-model="submitForm.trainContent" />
        </el-form-item>
        <el-form-item label="培训附件">
          <el-upload :value:file-list="trainFiles" multiple :auto-upload="false" :on-change="(file) => handleChange(file, 1)">
            <el-button>上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="考核方式">
          <el-select v-model="submitForm.testType">
            <el-option label="实操" value="实操" />
            <el-option label="笔试" value="笔试" />
          </el-select>
        </el-form-item>
        <el-table :data="submitForm.trainMemberInfo">
          <el-table-column label="部门" prop="dept">
            <template #default="{ row }">
              <el-input v-model="row.dept" />
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="name">
            <template #default="{ row }">
              <el-input v-model="row.name" />
            </template>
          </el-table-column>
          <el-table-column label="签到时间" prop="signTime">
            <template #default="{ row }">
              <el-time-picker v-model="row.signTime" placeholder="请选择" value-format="HH:mm:ss" />
            </template>
          </el-table-column>
          <el-table-column label="考核成绩" prop="score">
            <template #default="{ row }">
              <el-input v-model="row.score" @blur="updateresult(row.score, row)" />
            </template>
          </el-table-column>
          <el-table-column label="考核结果" prop="result">
            <template #default="{ row }">
              <el-input v-model="row.result" disabled />
            </template>
          </el-table-column>
          <el-table-column label="附件" prop="fileAddress">
            <template #default="{ row }">
              <el-upload :value:file-list="row.fileAddress" multiple :auto-upload="false" :on-change="(file) => handleChange(file, 2, row)">
                <el-button>上传</el-button>
              </el-upload>
            </template>
          </el-table-column>
          <el-table-column>
            <template #header>
              <el-button @click="addList">新增</el-button>
            </template>
            <template #default="{ row }">
              <el-button @click="deleteList(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item label="考核意见">
          本次共有{{ submitForm.trainMemberInfo.length }}人参与培训，考核合格{{ qualifiedCount }}人，未合格{{ unqualifiedCount }}人，合格率为{{ qualifiedRate }}
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button>取消</el-button>
        <el-button @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog> -->
    <el-form :model="submitForm"> </el-form>
  </div>
</template>

<script setup lang="ts">
import { getInductiontrainingList, addInductiontraining, updateInductiontraining, deleteInductiontraining, uploadFile } from "@/api/personnelManagement";
import { computed, reactive, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const tableData = ref([]);
const totalNum = ref(0);
const dialog = ref(false);
const showSearch = ref(true);
const trainFiles = ref([]);

const queryParams = reactive({
  pageNum: 1,
  pageSize: 20,
  dateTime: "",
  testType: "",
  trainName: "",
});
const submitForm = reactive({
  dateTime: "",
  testAdvice: "",
  testType: "",
  trainContent: "",
  trainCost: "",
  trainFiles: [],
  trainMemberInfo: [
    {
      name: "",
      dept: "",
      signTime: "",
      score: "",
      result: "",
      file: [],
      fileAddress: [],
    },
  ],
  trainName: "",
  trainPlace: "",
  trainTopic: "",
}) as any;
const getList = async () => {
  const { rows, code, total } = await getInductiontrainingList(queryParams);
  if (code == 200) {
    tableData.value = rows;
    totalNum.value = total;
  }
};
getList();
const resetQuery = () => {};







const handleDelete = async (id) => {
  const { code } = await deleteInductiontraining(id);
  if (code == 200) {
    // ElMessage.success('删除成功')
    getList();
  }
};
const handleDetail = () => {};
const handleAdd = (obj) => {
  router.push("/personnelManagement/inductionTraining/add");
};
</script>

<style scoped></style>
